<template>
	<view class="start-live">
	 
		<!-- <image src="../../../../static/download/bgi.png" mode="aspectFill" class="back-img" style=""></image> -->
		<!-- :src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.getDefaultImage().default_headimg" -->
		<!--  #ifdef  H5 -->
		<!-- <image :src="$util.img(room_img)?room_img:'../../../../static/download/bgi.png'  "  mode="aspectFill" class="back-img" style=""></image> -->
		<image :src="$util.img(room_img)?room_img:$util.img('/upload/uniapp/live/livebg.png')  "  mode="aspectFill" class="back-img" style=""></image>
		<!--  #endif -->
		<!--  #ifdef  APP-PLUS -->
		<image :src="room_img?room_img:$util.img('/upload/uniapp/live/livebg.png') "  mode="aspectFill" class="back-img" style=""></image>
		<!--  #endif -->
		<!-- <image :src="room_img ? $util.img(room_img) : $util.getDefaultImage().default_headimg"  mode="aspectFill" class="back-img" style=""></image> -->
		<!-- <image src="http://qiniu.tanyou.niuteam.cn/upload/473/common/images/20210115/20210115043006161069940615177_mid.gif" mode="aspectFill" class="back-img" style=""></image> -->
		<view class="exit-box" >
			x
		</view>
		<view class="start-content">
				<view class="upload" @click="roomImg" v-model="room_img">
					<image :src="$util.img('upload/uniapp/live/add.png')" mode=""></image> 
					<text>上传封面</text>
				</view>
				<view class="title-live">
					<textarea placeholder="请输入直播间名称"  maxlength="20" v-model="room_name"/>
					<view class="count">
						<text>{{room_namelength}}/20</text>
					</view>
				</view>
		</view>
<!-- 		<view class="" style="position: fixed; right: 34rpx;top: 164rpx; display: flex; flex-direction: column;justify-content: center;align-items: center;">
			<image :src="$util.img('upload/uniapp/live/set_shops.png')" mode="" style="width: 41rpx; height: 43rpx;"></image> 		
			<text >商品</text>
		</view> -->
		<view class="btn" @click="startLive()">
			<button type="default" class="start-show">开始直播</button>
		</view>
		
	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js";
	import Config from '@/common/js/config.js'
	
	var sdk = uni.requireNativePlugin('TXMLVB-SdkWX');
	//LVB插件对象
	var sdkwx = uni.requireNativePlugin('TXMLVB-LiveRoom');
	var pusher = uni.requireNativePlugin('TXMLVB-Pusher');
		
	
	
	export default {
		components: {
			Config
		},
		data() {
			return {
				room_name:'',
				room_img:'',
				img:'',
				roomid:0,
			}
		},
		onLoad(option) {
			// 开启麦克风和摄像头
			this.requestAndroidPermission('android.permission.CAMERA','android.permission.RECORD_AUDIO')
		},
		mixins: [Config],
		mounted() {},
		onUnload() {
		},
		onShow() {
			var licenceURL = Config.licenceURL;
			var licenceKey = Config.licenceKey;
						 
			sdk.setLicence(licenceURL, licenceKey);
			let that =  this
			this.$api.sendRequest({
				url: '/api/Memberliveplay/getUserSig',
				data: {},
				success: res => {
					console.log(res);
					uni.setStorageSync('live_uid', res.UserID);
					let user_info = uni.getStorageSync('userInfo');
					let UserID = res.UserID
					let UserSig = res.UserSig
					
					sdkwx.login({
						sdkAppID:Config.imAppid,//直播的appID
						userID:UserID+'',//用户ID
						userName:user_info.nickname,//用户名称
						userAvatar:user_info.headimg,//用户头像
						userSig:UserSig ,//签名，参考腾讯官方文档
						
					}, function(res){
						console.log(Config.imAppid);
						console.log(res);
						if (res.code == 0) {
							console.log("login success");
						} else {
							console.log("login failed! ", "errCode：" + res.code + ", errMsg:" + res.data);
						}
					});
				}
			})
			
		},
		
		methods: {
			navBarLeft(){
				this.$util.redirectTo('/pages/member/index/index',{})
			},
			// 摄像头 麦克风
			async requestAndroidPermission(permisionID,permision_ID) {
				console.log('调用摄像头');
				var strStatus;
				permision.requestAndroidPermission(permisionID).then(res => {
				 
					permision.requestAndroidPermission(permision_ID)
				})
			},
			//上传开始直播所需
			startLive(){
				let that = this
				// 校验
				if (!this.room_name) {
					uni.showToast({
						icon: 'none',
						title: '请输入直播间名称'
					})
					return false;
				}
				if (!this.room_img) {
					uni.showToast({
						icon: 'none',
						title: '请输入上传图片'
					})
					return false;
				}
				let platform=uni.getSystemInfoSync().platform
				 
				if(platform=='ios'){
					 that.$api.sendRequest({
					 	url: '/api/Memberliveplay/startLiveAddGoods',
					 	data: {
					 		room_name: that.room_name,
					 		room_img:that.room_img
					 	},
					 	success(res) {
					 		that.roomid = res.roomid
					 		// uni.closeSocket();
					 		that.liveRoom(that.roomid)
					 		return true;
					 	}
					 });
					 
				}else if(platform=='android'){
					permision.requestAndroidPermission('android.permission.CAMERA').then(camera_res => {
						console.log(camera_res);
						if (camera_res == 1) {
							// strStatus = "已获得授权"
							permision.requestAndroidPermission('android.permission.RECORD_AUDIO').then(res => {
								console.log(res);
								if (res == 1) {
									that.$api.sendRequest({
										url: '/api/Memberliveplay/startLiveAddGoods',
										data: {
											room_name: that.room_name,
											room_img:that.room_img
										},
										success(res) {
											that.roomid = res.roomid
											// uni.closeSocket();
											that.liveRoom(that.roomid)
											return true;
										}
									});
								}else {
									uni.showModal({
										title: '提示',
										content: '是否去开启麦克风权限',
										success: (res) => {
											if (res.confirm) {
												 permision.gotoAppPermissionSetting()
											}
										}
									});
								}
								
							})
						}else {
							uni.showModal({
								title: '提示',
								content: '是否去开启麦克风权限',
								success: (res) => {
									if (res.confirm) {
										 permision.gotoAppPermissionSetting()
									}
								}
							});
						}					
					})
				}
				
			},
			// 跳转
			liveRoom(roomid){
				uni.redirectTo({
				    url: '/otherpages/member/lives/index/live_room?roomID='+ roomid
				});	
				
			},
			// 房间图片
			roomImg() {
				this.$util.upload(
					1, {
						path: 'headimg'
					},
					res => {
						console.log(res);
						// this.newImg = res[0];
						this.room_img = res[0];
					}
				);
			},
		},
		computed:{
			room_namelength: function () {
				return 	this.room_name.length
			}
		}
			
	}
</script>

<style lang="scss" scoped>
	.info-head{
		position: relative;
		z-index: 100;
		background-color: rgba(255,255,255,.2);
	}
	/deep/.uni-textarea-placeholder{
		color: #fff;
	}
	.back-img{
		width: 100vw; height: 100vh; padding: 0!important;margin: 0!important; position: absolute;top: 0;
		left: 0;
		opacity: .9;
		filter: blur(2px);
	}
	.start-live{
		box-sizing: border-box;
		padding: 72rpx 32rpx!important;
		.exit-box{
			width: 24rpx;
			height: 24rpx;
			color: #FFFFFF;
			box-sizing: border-box;
			margin-bottom: 70rpx;
		}
		.start-content{
			width: 686rpx;
			height: 236rpx;
			box-sizing: border-box;
			background: #0D0002;
			opacity: 0.28;
			// background-color: rgba(13,0,2,0.28);
			border-radius: 10rpx;
			padding: 33rpx;
			display: flex;
			justify-content: space-between;
			
			.upload{
				width: 175rpx;
				height: 177rpx;
				border-radius: 10rpx;
				background-color: rgba(61,61,61,0.15);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				margin-right: 32rpx;
				image{
					width: 42rpx;
					height: 42rpx;
					margin-top: 25rpx;
					margin-bottom: 30rpx;
				}
			}
			.title-live{
				width: 410rpx;
				uni-textarea{width: 100%;height: 124rpx;}
				.count{text-align: right;}
			}
			
			textarea{
				color: #FFFFFF;
				// color: #0D0002;
			}
		}
		
		.start-show{
			width: 482rpx;
			height: 96rpx;
			// background: linear-gradient(95deg, #F80926 0%, #F84923 100%);
			// background: linear-gradient(95deg, #000 0%, #fff 100%);
			background: linear-gradient(95deg, #F80926 100%, #F84923 100%);
			border-radius: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;	
		}
	
		.btn{
			position: fixed; 
			bottom:30rpx;	
			left: 50%;
			transform: translate(-50%);
			opacity: 0.9;
		}
		text{
			color: #FFFFFF;
		}
	}
	
</style>